import {Route,Redirect,Switch} from 'react-router-dom'
import React, { Component ,lazy,Suspense} from 'react';
import Loading from '@/components/Loding';
// 换一种方式引入，路由懒加载
// import Login from '@/views/login/Login'
// lazy是个函数 
// Suspense是标签,给包裹的足迹爱你设置loading加载动画效果  利用Suspense的fallback属性来实现
const Login = lazy(()=>import('@/views/login/Login'))
const Dashboard = lazy(()=>import('@/views/dashboard/Dashboard'))
class Index extends Component {
    render() {
        return (
            <Suspense fallback={<Loading></Loading>}>  {/* 使用时需要用标签的形式书写 */}
                <Switch> {/* Switch用来只匹配一个 */}
                    <Route path='/login' component={Login}></Route>
                    <Route path='/dashboard' component={Dashboard}></Route>
                    <Redirect from='/' to='/login' exact>/</Redirect>
                </Switch>
            </Suspense>
        );
    }
}

export default Index;
